<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表情包管理器 - Chrome插件</title>
    <style>
        :root {
            --primary: #4a6fa5;
            --secondary: #6b8cbc;
            --light: #f0f4f8;
            --dark: #2c3e50;
            --success: #2ecc71;
            --danger: #e74c3c;
            --warning: #f39c12;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background-color: #f5f7fa;
            color: var(--dark);
            min-width: 500px;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        
        header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 0;
            border-bottom: 2px solid var(--secondary);
            margin-bottom: 25px;
        }
        
        .logo {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .logo-icon {
            font-size: 28px;
            color: var(--primary);
        }
        
        .logo h1 {
            font-size: 22px;
            font-weight: 600;
        }
        
        .storage-info {
            background: var(--light);
            border-radius: 20px;
            padding: 8px 15px;
            font-size: 14px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .storage-bar {
            width: 120px;
            height: 8px;
            background: #e0e5ec;
            border-radius: 4px;
            overflow: hidden;
        }
        
        .storage-progress {
            height: 100%;
            background: var(--primary);
            border-radius: 4px;
            width: 35%;
        }
        
        .tabs {
            display: flex;
            background: var(--light);
            border-radius: 12px;
            margin-bottom: 25px;
            overflow: hidden;
        }
        
        .tab {
            flex: 1;
            text-align: center;
            padding: 12px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-weight: 500;
        }
        
        .tab.active {
            background: var(--primary);
            color: white;
        }
        
        .tab-content {
            display: none;
            animation: fadeIn 0.4s ease;
        }
        
        .tab-content.active {
            display: block;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .upload-area {
            border: 2px dashed var(--secondary);
            border-radius: 12px;
            padding: 40px 20px;
            text-align: center;
            margin-bottom: 25px;
            background: rgba(107, 140, 188, 0.05);
            transition: all 0.3s;
            cursor: pointer;
        }
        
        .upload-area:hover {
            background: rgba(107, 140, 188, 0.1);
            border-color: var(--primary);
        }
        
        .upload-icon {
            font-size: 48px;
            color: var(--primary);
            margin-bottom: 15px;
        }
        
        .grid-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
            gap: 15px;
            margin-bottom: 25px;
        }
        
        .emoji-card {
            background: white;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 3px 10px rgba(0,0,0,0.08);
            transition: all 0.3s ease;
            cursor: pointer;
            position: relative;
        }
        
        .emoji-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 15px rgba(0,0,0,0.1);
        }
        
        .emoji-card img {
            width: 100%;
            height: 120px;
            object-fit: cover;
            display: block;
        }
        
        .emoji-meta {
            padding: 10px;
            font-size: 12px;
            display: flex;
            justify-content: space-between;
        }
        
        .emoji-tags {
            color: var(--primary);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .emoji-size {
            color: #777;
            flex-shrink: 0;
        }
        
        .emoji-actions {
            position: absolute;
            top: 5px;
            right: 5px;
            display: none;
            gap: 5px;
        }
        
        .emoji-card:hover .emoji-actions {
            display: flex;
        }
        
        .action-btn {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background: rgba(255,255,255,0.9);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
            transition: all 0.2s;
        }
        
        .action-btn:hover {
            transform: scale(1.1);
        }
        
        .delete-btn {
            color: var(--danger);
        }
        
        .tag-btn {
            color: var(--success);
        }
        
        .insert-btn {
            background: var(--primary);
            color: white;
            border: none;
            border-radius: 30px;
            padding: 12px 25px;
            font-size: 16px;
            font-weight: 500;
            cursor: pointer;
            display: block;
            margin: 30px auto 20px;
            transition: all 0.3s;
            box-shadow: 0 4px 15px rgba(74, 111, 165, 0.3);
        }
        
        .insert-btn:hover {
            background: var(--secondary);
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(74, 111, 165, 0.4);
        }
        
        .insert-btn:active {
            transform: translateY(0);
        }
        
        .management-section {
            background: white;
            border-radius: 12px;
            padding: 25px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
            margin-bottom: 25px;
        }
        
        .section-title {
            font-size: 18px;
            margin-bottom: 20px;
            color: var(--primary);
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .tag-container {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 20px;
        }
        
        .tag {
            background: var(--light);
            padding: 6px 15px;
            border-radius: 20px;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .tag:hover {
            background: var(--secondary);
            color: white;
        }
        
        .tag.active {
            background: var(--primary);
            color: white;
        }
        
        .cleanup-options {
            display: flex;
            flex-direction: column;
            gap: 15px;
            margin-top: 20px;
        }
        
        .option {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px;
            background: var(--light);
            border-radius: 10px;
        }
        
        .cleanup-btn {
            background: var(--warning);
            color: white;
            border: none;
            border-radius: 6px;
            padding: 8px 15px;
            cursor: pointer;
            font-size: 14px;
        }
        
        .cleanup-btn:hover {
            opacity: 0.9;
        }
        
        .export-import {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 30px;
        }
        
        .export-btn, .import-btn {
            padding: 12px 25px;
            border-radius: 8px;
            border: none;
            font-weight: 500;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: all 0.3s;
        }
        
        .export-btn {
            background: var(--success);
            color: white;
        }
        
        .import-btn {
            background: var(--dark);
            color: white;
        }
        
        .export-btn:hover, .import-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 10px rgba(0,0,0,0.15);
        }
        
        footer {
            text-align: center;
            margin-top: 40px;
            padding-top: 20px;
            border-top: 1px solid #e0e5ec;
            color: #777;
            font-size: 14px;
        }
        
        .tooltip {
            position: relative;
            display: inline-block;
        }
        
        .tooltip .tooltiptext {
            visibility: hidden;
            width: 200px;
            background-color: #333;
            color: #fff;
            text-align: center;
            border-radius: 6px;
            padding: 10px;
            position: absolute;
            z-index: 1;
            bottom: 125%;
            left: 50%;
            transform: translateX(-50%);
            opacity: 0;
            transition: opacity 0.3s;
            font-size: 13px;
        }
        
        .tooltip:hover .tooltiptext {
            visibility: visible;
            opacity: 1;
        }
        
        .empty-state {
            text-align: center;
            padding: 40px 20px;
            color: #777;
        }
        
        .empty-state i {
            font-size: 48px;
            margin-bottom: 15px;
            color: #ccc;
        }
    </style>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
    <header>
        <div class="logo">
            <i class="fas fa-grin-beam logo-icon"></i>
            <h1>表情包管理器</h1>
        </div>
        <div class="storage-info">
            <i class="fas fa-hard-drive"></i>
            <span>存储使用</span>
            <div class="storage-bar">
                <div class="storage-progress"></div>
            </div>
            <span>35%</span>
        </div>
    </header>
    
    <div class="tabs">
        <div class="tab active" data-tab="library">图库</div>
        <div class="tab" data-tab="collect">收藏表情</div>
        <div class="tab" data-tab="manage">管理</div>
    </div>
    
    <div class="tab-content active" id="library-tab">
        <div class="upload-area" id="drop-zone">
            <i class="fas fa-cloud-upload-alt upload-icon"></i>
            <h3>添加表情包到图库</h3>
            <p>拖放图片到此处，或点击选择文件</p>
            <p class="tooltip">
                <i class="fas fa-info-circle"></i>
                <span class="tooltiptext">也可在网页中右键图片选择"保存到表情包"</span>
            </p>
            <input type="file" id="file-input" accept="image/*" multiple style="display: none;">
        </div>
        
        <div class="tag-container">
            <div class="tag active">全部</div>
            <div class="tag">搞笑</div>
            <div class="tag">动物</div>
            <div class="tag">动漫</div>
            <div class="tag">日常</div>
            <div class="tag">反应</div>
            <div class="tag">自定义标签+</div>
        </div>
        
        <div class="grid-container" id="emoji-grid">
            <!-- 表情包将通过JavaScript动态添加 -->
            <div class="empty-state">
                <i class="fas fa-grin-beam-sweat"></i>
                <h3>图库空空如也</h3>
                <p>添加一些表情包开始使用吧！</p>
            </div>
        </div>
        
        <button class="insert-btn" id="insert-button">
            <i class="fas fa-paper-plane"></i> 插入到当前页面
        </button>
    </div>
    
    <div class="tab-content" id="manage-tab">
        <div class="management-section">
            <h2 class="section-title"><i class="fas fa-broom"></i> 存储清理</h2>
            <p>优化存储空间，移除不常用的表情包</p>
            
            <div class="cleanup-options">
                <div class="option">
                    <div>
                        <h4>压缩大尺寸图片</h4>
                        <p>将大于200KB的图片转换为WebP格式</p>
                    </div>
                    <button class="cleanup-btn">优化 (节省 15.2MB)</button>
                </div>
                
                <div class="option">
                    <div>
                        <h4>清除未使用的表情</h4>
                        <p>删除30天内未使用的表情包</p>
                    </div>
                    <button class="cleanup-btn">清除 (12个)</button>
                </div>
                
                <div class="option">
                    <div>
                        <h4>重复图片清理</h4>
                        <p>移除重复的表情包</p>
                    </div>
                    <button class="cleanup-btn">扫描</button>
                </div>
            </div>
        </div>
        
        <div class="management-section">
            <h2 class="section-title"><i class="fas fa-sliders-h"></i> 插件设置</h2>
            
            <div class="option">
                <div>
                    <h4>自动压缩新图片</h4>
                    <p>自动优化大于100KB的新图片</p>
                </div>
                <label class="switch">
                    <input type="checkbox" checked>
                    <span class="slider round"></span>
                </label>
            </div>
            
            <div class="option">
                <div>
                    <h4>存储限制</h4>
                    <p>当存储超过90%时提醒清理</p>
                </div>
                <label class="switch">
                    <input type="checkbox" checked>
                    <span class="slider round"></span>
                </label>
            </div>
        </div>
        
        <div class="export-import">
            <button class="export-btn">
                <i class="fas fa-file-export"></i> 导出表情包
            </button>
            <button class="import-btn">
                <i class="fas fa-file-import"></i> 导入表情包
            </button>
        </div>
    </div>
    
    <footer>
        <p>表情包管理器 v1.0 | 所有数据存储在本地浏览器中 | 无需登录</p>
        <p>存储位置: Chrome扩展本地存储 | 插件卸载时数据将被清除</p>
    </footer>

    <script>
        // 模拟数据
        const mockEmojis = [
            { id: 1, name: '大笑熊猫', tags: ['动物', '搞笑'], size: '45KB', url: 'https://via.placeholder.com/120/4a6fa5/ffffff?text=Panda' },
            { id: 2, name: '捂脸猫', tags: ['动物', '反应'], size: '32KB', url: 'https://via.placeholder.com/120/6b8cbc/ffffff?text=Cat' },
            { id: 3, name: '疑问狗', tags: ['动物', '搞笑'], size: '56KB', url: 'https://via.placeholder.com/120/2c3e50/ffffff?text=Dog' },
            { id: 4, name: '点赞熊', tags: ['动物', '反应'], size: '68KB', url: 'https://via.placeholder.com/120/2ecc71/ffffff?text=Bear' },
            { id: 5, name: '笑哭', tags: ['搞笑', '日常'], size: '28KB', url: 'https://via.placeholder.com/120/e74c3c/ffffff?text=Xiao' },
            { id: 6, name: '震惊', tags: ['反应', '动漫'], size: '51KB', url: 'https://via.placeholder.com/120/f39c12/ffffff?text=Wow' },
            { id: 7, name: '晚安猫', tags: ['动物', '日常'], size: '39KB', url: 'https://via.placeholder.com/120/9b59b6/ffffff?text=Night' },
            { id: 8, name: '加油', tags: ['动漫', '反应'], size: '42KB', url: 'https://via.placeholder.com/120/1abc9c/ffffff?text=Fight' }
        ];
        
        // DOM元素
        const tabs = document.querySelectorAll('.tab');
        const tabContents = document.querySelectorAll('.tab-content');
        const dropZone = document.getElementById('drop-zone');
        const fileInput = document.getElementById('file-input');
        const emojiGrid = document.getElementById('emoji-grid');
        const insertButton = document.getElementById('insert-button');
        
        // 初始化表情包网格
        function renderEmojis(emojis) {
            if (emojis.length === 0) {
                emojiGrid.innerHTML = `
                    <div class="empty-state">
                        <i class="fas fa-grin-beam-sweat"></i>
                        <h3>图库空空如也</h3>
                        <p>添加一些表情包开始使用吧！</p>
                    </div>
                `;
                return;
            }
            
            emojiGrid.innerHTML = '';
            emojis.forEach(emoji => {
                const emojiCard = document.createElement('div');
                emojiCard.className = 'emoji-card';
                emojiCard.innerHTML = `
                    <img src="${emoji.url}" alt="${emoji.name}">
                    <div class="emoji-meta">
                        <div class="emoji-tags">${emoji.tags.join(', ')}</div>
                        <div class="emoji-size">${emoji.size}</div>
                    </div>
                    <div class="emoji-actions">
                        <div class="action-btn delete-btn" title="删除">
                            <i class="fas fa-trash-alt"></i>
                        </div>
                        <div class="action-btn tag-btn" title="编辑标签">
                            <i class="fas fa-tag"></i>
                        </div>
                    </div>
                `;
                emojiGrid.appendChild(emojiCard);
            });
        }
        
        // 标签点击事件
        document.querySelectorAll('.tag').forEach(tag => {
            tag.addEventListener('click', function() {
                document.querySelectorAll('.tag').forEach(t => t.classList.remove('active'));
                this.classList.add('active');
                
                // 实际应用中会根据标签过滤表情包
                const tagText = this.textContent;
                if (tagText === '全部') {
                    renderEmojis(mockEmojis);
                } else {
                    const filtered = mockEmojis.filter(e => e.tags.includes(tagText));
                    renderEmojis(filtered);
                }
            });
        });
        
        // 标签切换
        tabs.forEach(tab => {
            tab.addEventListener('click', function() {
                const tabId = this.getAttribute('data-tab');
                
                // 更新标签状态
                tabs.forEach(t => t.classList.remove('active'));
                this.classList.add('active');
                
                // 显示对应内容
                tabContents.forEach(content => {
                    content.classList.remove('active');
                    if (content.id === `${tabId}-tab`) {
                        content.classList.add('active');
                    }
                });
            });
        });
        
        // 文件上传处理
        dropZone.addEventListener('click', () => fileInput.click());
        
        fileInput.addEventListener('change', (e) => {
            if (e.target.files.length > 0) {
                // 在实际应用中，这里会处理文件并保存到IndexedDB
                alert(`已添加 ${e.target.files.length} 个表情包！`);
                
                // 模拟添加后刷新
                renderEmojis(mockEmojis);
            }
        });
        
        // 拖放功能
        dropZone.addEventListener('dragover', (e) => {
            e.preventDefault();
            dropZone.style.backgroundColor = 'rgba(107, 140, 188, 0.15)';
        });
        
        dropZone.addEventListener('dragleave', () => {
            dropZone.style.backgroundColor = 'rgba(107, 140, 188, 0.05)';
        });
        
        dropZone.addEventListener('drop', (e) => {
            e.preventDefault();
            dropZone.style.backgroundColor = 'rgba(107, 140, 188, 0.05)';
            
            if (e.dataTransfer.files.length > 0) {
                // 在实际应用中，这里会处理文件并保存到IndexedDB
                alert(`已添加 ${e.dataTransfer.files.length} 个表情包！`);
                
                // 模拟添加后刷新
                renderEmojis(mockEmojis);
            }
        });
        
        // 插入按钮点击
        insertButton.addEventListener('click', () => {
            // 在实际应用中，这里会向内容脚本发送消息插入表情
            alert('表情包已插入当前页面！');
        });
        
        // 初始渲染
        renderEmojis(mockEmojis);
    </script>
</body>
</html>